<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=0.7">
	<title>pond</title>
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css')}}?t={{time()}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/list.css')}}?v=1">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/st.css')}}">
	<script src="{{URL::asset('js/jquery.min.js')}}"></script>
	<script src="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
</head>
<body style="padding:30px;background-color:#f3f3f4;">
<div id="main">
	<el-card>
		<div slot="header" class="el-card-header" align="center">
			<div class="btn-group">
				<el-radio-group v-model="seaForm.pond">
					<el-radio-button label="1">首选</el-radio-button>
					<el-radio-button label="2">正常</el-radio-button>
					<el-radio-button label="3">自联</el-radio-button>
					<el-radio-button label="4">备选</el-radio-button>
				</el-radio-group>
			</div>
		</div>
		<div class="el-card-body">
			<el-table :data="table.data" border v-loading.fullscreen.lock="table.loading">
				<el-table-column align="center" prop="id" label="序号" width="75">
				</el-table-column>
			  	<el-table-column align="center" prop="st_name" label="学生姓名">
			  	</el-table-column>
				<el-table-column align="center" prop="age" label="年龄">
				</el-table-column>
				<el-table-column align="center" prop="age" label="性别">
				</el-table-column>
				<el-table-column align="center" prop="level" label="定级">
				</el-table-column>
				<el-table-column align="center" prop="enroll_at" label="报名时间">
				</el-table-column>
				<el-table-column align="center" prop="p_name" label="家长姓名">
				</el-table-column>
				<el-table-column align="center" prop="phone" label="联系方式">
				</el-table-column>
				<el-table-column align="center" type="expand" label="...">
					<template slot-scope="props">
						<p style="margin:0;padding:0;">备注：@{{props.row.remark}}</p>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				align="right"
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="seaForm.page.pageNumber"
				:page-sizes="[10, 25, 50]"
				:page-size="seaForm.page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="seaForm.page.total">
			</el-pagination>
		</div>
	</el-card>
</div>
</body>
<script type="text/javascript">
let main = new Vue({
	el:"#main",
	data:{
		seaForm:{
			pond:"1",
			_token:"{{csrf_token()}}",
			page:{
				pageNumber:1,
				pageSize:10,
				total:0
			}
		},
		table:{
			loading:false,
			data:[]
		}
	},
	watch:{
		'seaForm.pond':function(val,oldval){
			this.getData();
		}
   	},
	mounted:function() {
		this.init();
	},
	methods:{
		init() {
			this.getData();
		},
		getData() {
			this.table.loading = true;
			let url = "{{URL::asset('admin/consultation/pond/get_list')}}";
			let params = this.seaForm;
			$.post(url,params,function(res) {
				main.table.loading = false;
				if(res.code == 1){
					// main.$notify({message:res.msg,type:"success",title:"Success"});
					main.table.data = res.data.rows;
					main.seaForm.page.total = res.data.total;
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			})
		},
		pageSizeChange(val) {
			this.seaForm.page.pageSize = val;
			this.seaForm.page.pageNumber = 1;
			this.getData();
		},
		curPageChange(val) {
			this.seaForm.page.pageNumber = val;
			this.getData();
		}
	}
})
</script>
</html>
